<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11 class和style属性</title>
    <script src="../js/vue.min.js"></script>
    <style>
        .aa {
            color: red;
            font-size: 20px;
        }

        .cc {
            background-color: #5e5e5e;
        }

        .dd {
            background-color: #5e5e3e;
        }
    </style>
</head>
<body>
<div id="app">
    <p class="aa">以原来class显示</p>
    <hr>
    <pre style="color: red">
       v-bind:  class="aa">以v-bind原来class显示  不可以，Vue的属性绑定时不能直接css样式
    </pre>
    <hr>
    方式1:变量形式
    <p :class="bb">变量形式,必须在data中定义</p>
    <hr>
    方式2：数组形式，同时引用多个
    <p :class="[bb,dd]">数组形式</p>
    <hr>

    方式3：json形式，常用！！！
    <p :class="{aa:true,cc:flag}">json数组形式</p>
    <p :class="{aa:num>0}">json数组形式 sdds</p>


</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                bb: 'aa',
                dd: 'cc',
                flag: true,
                num: -2,
                hello: {aa: true, cc: true},
                xx: {color: 'blue', fontSize: '30px'},
                yy: {backgroundColor: '#ff7300'}
            }
        }
    })
</script>
</body>
</html>